import React from "react";
import { Button, Collapse, Divider } from "@arco-design/web-react";
import Title, { SubTitle } from "./Title";
const CollapseItem = Collapse.Item;
const SceneCard = () => {
  const list = [
    {
      title: "内容创作",
      img: "/gif1.gif",
      desc: "出色的文字创作能力",
      desc2:
        "具备丰富的文字创作、严格的指令遵从和庞大的知识储备能力，可应用在大纲生成、营销文案生成等内容创作场景。",
    },
    {
      title: "知识问答",
      img: "/gif2.gif",
      desc: "生活常识、工作技能快速获取",
      desc2: "集成了海量的知识库，可高效地解决工作、生活等各类场景中的问题。",
    },
    {
      title: "人设对话",
      img: "/gif3.gif",
      desc: "生动精确的角色扮演能力",
      desc2:
        "角色扮演能力符合设定且具备多轮记忆，可应用在社交陪伴、虚拟主播等人设对话场景。",
    },
    {
      title: "代码生成",
      img: "/gif4.gif",
      desc: "专业的代码生成能力",
      desc2: "具备专业的代码生成能力和知识储备，可高效地辅助代码生产场景。",
    },
    {
      title: "信息提取",
      img: "/gif5.gif",
      desc: "强大的语言理解能力",
      desc2:
        "深入理解文本信息之间的逻辑关系，从非结构化的文本信息中抽取准确的结构化信息。",
    },
    {
      title: "逻辑推理",
      img: "/gif6.gif",
      desc: "进行思维、常识、科学推理",
      desc2:
        "通过分析问题的前提条件和假设来推理出答案或解决方案，给出新的想法和见解。",
    },
  ];
  return (
    <div>
      <Title>场景示例</Title>
      <SubTitle>
        丰富的应用场景和解决方案，满足多种业务需求，更多能力敬请期待
      </SubTitle>
      <div className="mt-5"></div>
      <Collapse
        accordion
        triggerRegion="header"
        expandIconPosition="right"
        className="bg-none collapseBg"
        bordered={false}
        destroyOnHide={false}
      >
        {list.map(({ title, img, desc, desc2 }, index) => {
          return (
            <CollapseItem
              style={{ background: "#F8F9FF" }}
              contentStyle={{ background: "#F8F9FF" }}
              header={title}
              name={index + 1 + ""}
              key={index}
            >
              <div className="min-h-44">
                <img src={img} alt="" />
              </div>
              <div>{desc}</div>
              <div>{desc2}</div>
              <Button className="w-full" type="primary">
                立即咨询
              </Button>
            </CollapseItem>
          );
        })}
      </Collapse>
    </div>
  );
};
export default SceneCard;
